<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			font-family: 微软雅黑;
			box-sizing: border-box;
		}
		 li{
			float: left;
			list-style: none;
			line-height: 30px;
			color: #043567;
			font-weight: 800;
			border-left: 1px solid #043567;
			border-bottom: 1px solid #043567;
		}
		ul{
			border: 1px solid #043567;
			text-align: center;
			border-left: 0;
			border-bottom: 0;
		}
		.container{
			width: 1000px;
			margin: auto;
			margin-top: 20px;	
		}
		input{
			height: 30px;
			font-size: 15px;
			padding: 0 0 0 10px;
			color: #ccc;
			outline: none;
		}
		button{
			height: 25px;
			font-size: 16px;
			background: #fff;
			border: 0px solid #ccc;
			margin-left: -40px;
			padding: 0 0px;
			color: #f68d3b;
			outline: none;
			cursor: pointer;
		}
		.p1{
			float: right;
			font-size: 14.28616px;
		}
		#cs{
			margin-right: 20px;
		}
		ul::after, li::after{
		    display: table;
		    content: "";
		    clear: both;
		}
		.bt{
			text-align: center;
			background: #043567;
			color: #fff;
			font-weight: 800;
			line-height: 40px;
			margin-top: 20px;
		}
		#now li{
			width: 14.2861%;
		}
		#future li{
			width: 12.5%;
		}
		#shzs li{
			width: 33.3333333%;
			height: 180px;
			vertical-align: middle;
			padding:  15px;

		}
		#shzs h1{
			font-size: 24px;
		}
		#shzs h2{
			font-size: 16px;
		}
		#shzs p{
			font-weight: 500;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div class="container">
		<input type="text" placeholder="输入要查看的城市"><button>搜索</button>
		<p class="p1">城市：<span id="cs"></span>今日天气：<span id="jrtq"></span></p>
		<p class="bt">最近七天</p>
		<ul id="now">
		</ul>
		<p class="bt">逐小时预报</p>
		<ul id="future">
		</ul>
		<p class="bt">生活助手</p>
		<ul id="shzs">
		</ul>
	</div>



	<script>
	var ssCs = '北京';
	var aj_f = function(){
		var xmlhttp;
		if (window.XMLHttpRequest){
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp=new XMLHttpRequest();
		}
		else{
			// IE6, IE5 浏览器执行代码
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function(){
			if (xmlhttp.readyState==4 && xmlhttp.status==200){
				// 开始自己写
				var json = JSON.parse(xmlhttp.responseText);
				console.log(json);
				if (json.status=='unknown location') {
                    document.querySelector('input').value = '';
					alert('请输入城市、乡镇、街道、景点名称 查天气');
				}else{
					cs.innerHTML=json.basic.cnty+'>'+json.basic.city;
					jrtq.innerHTML=json.daily_forecast[0].cond.txt_d+'&nbsp'+json.daily_forecast[0].tmp.min+"~"+json.daily_forecast[0].tmp.max+"°C"
					now.innerHTML = '';
					future.innerHTML='';
					for(var i = 0;i<json.daily_forecast.length;i++){
						now.innerHTML+='<li>'+json.daily_forecast[i].date.slice(6)+' <br>'+json.daily_forecast[i].cond.txt_d+'<br>'+json.daily_forecast[i].tmp.min+'~'+json.daily_forecast[i].tmp.max+'°C <br>'+json.daily_forecast[i].wind.dir+' <br></li>'
					}
					for(var a = 0;a<json.hourly_forecast.length;a++){
						future.innerHTML+='<li>'+json.hourly_forecast[a].date.slice(10)+' <br>'+json.hourly_forecast[a].cond.txt+'<br>'+json.hourly_forecast[a].tmp+'°C <br>'+json.hourly_forecast[a].wind.dir+' <br></li>'
					}
					shzs.innerHTML='';
					shzs.innerHTML+='<li><h1>'+json.suggestion.uv.brf+'</h1><h2>紫外线指数</h2><p>'+json.suggestion.uv.txt+'</p></li>';
					shzs.innerHTML+='<li><h1>'+json.suggestion.sport.brf+'</h1><h2>减肥指数</h2><p>'+json.suggestion.sport.txt+'</p></li>';
					shzs.innerHTML+='<li><h1>'+json.suggestion.trav.brf+'</h1><h2>健臻·血糖指数</h2><p>'+json.suggestion.trav.txt+'</p></li>';
					shzs.innerHTML+='<li><h1>'+json.suggestion.drsg.brf+'</h1><h2>穿衣指数</h2><p>'+json.suggestion.drsg.txt+'</p></li>';
					shzs.innerHTML+='<li><h1>'+json.suggestion.cw.brf+'</h1><h2>洗车指数</h2><p>'+json.suggestion.cw.txt+'</p></li>';
					shzs.innerHTML+='<li><h1>'+json.suggestion.air.brf+'</h1><h2>空气污染扩散指数</h2><p>'+json.suggestion.air.txt+'</p></li>';
					document.querySelector('input').value = '';
				}
				
				// 结束自己写
			}
		}
		xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+ssCs,true);
		// 盘好路径
		xmlhttp.send();
	}
	aj_f();
	document.querySelector('button').onclick=function(){
		ssCs=document.querySelector('input').value;
		aj_f();
	}
	document.onkeydown = function(e){
	    if(e.keyCode == 13){
			ssCs=document.querySelector('input').value;
			aj_f();
	    }
	}
	</script>
</body>
</html>